<template>
    <div class="menu">
        <div class="menuadd">
            <el-button round type="primary" plain @click="addmenu">添加</el-button>
        </div>

        <!-- 表单数据 -->
        <el-table :data="bannerlist" style="width: 100%">

            <el-table-column fixed prop="id" label="序号" width="50">
            </el-table-column>

            <el-table-column prop="title" label="活动名称">
            </el-table-column>

            <el-table-column prop="img" label="图片">
                <template v-slot="$prop">
                    <img :src="$prop.row.img" alt="" width="300" height="100">
                </template>
            </el-table-column>

            <el-table-column prop="status" label="状态">
                <template v-slot="$prop">
                    <el-button v-if="$prop.row.status == 1" round plain size="mini" type="primary">正常</el-button>
                    <el-button v-else round plain size="mini" type="warning">禁用</el-button>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template v-slot="$prop">
                    <el-button round type="primary" size="mini" @click="change($prop.row)" plain>编辑</el-button>
                    <el-button round type="danger" size="mini" @click="del($prop.row.id)" plain>
                        删除</el-button>
                </template>
            </el-table-column>

        </el-table>

        <!-- 分页器 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout=" prev, pager, next" :total="400" background>
            </el-pagination>
        </div>
        <v-dialog :info="info" ref="son" />
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import vDialog from "./dialog.vue"
export default {
    data() {
        return {
            size: 5,
            page: 1,
            currentPage4: 1,
            info: {
                isShow: false
            }
        }
    },
    computed: {
        ...mapState("banner", ["bannerlist", "bannercount"]),
        ...mapState('cate', ['catelist']),//商品分类数据
    },
    methods: {
        ...mapActions("banner", ["getbannerlist", "getbannercount"]),
        ...mapActions('cate', ['getcatelist']),
        addmenu() {
            this.info.isShow = true
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);

        },
        // 删除
        del(id) {
            this.$confirms(() => {
                this.$Api.bannerdelete({ id }).then((res) => {
                    console.log(res, 111111);
                    if (res.code == 200) {
                        this.$message.success(res.msg)
                        this.getbannercount();
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            })
            console.log(id, "删除");
        },
        handleSizeChange(page) {
            this.getbannerlist({ page: this.page, size: this.size })
            this.page = page;
        },
         // 编辑
         change() {

},
    },
    mounted() {
        this.getbannerlist({ size: this.size, page: this.page });
        this.getcatelist();
        this.getbannercount();
    },
    components: {
        vDialog
    }
}

</script>


<style leng='less' scoped>

</style>